<%--
  Created by IntelliJ IDEA.
  User: xsh
  Date: 2019/10/25
  Time: 14:32
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>

<%--goods_name, price, type_id, description, date, stars--%>
<head>
    <title>商品添加页面</title>
    <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<form class="form-horizontal" action="${pageContext.request.contextPath}/goods/add" enctype="multipart/form-data" method="post">
    <div class="form-group">
        <label for="goodsName" class="col-sm-2 control-label">商品名称：</label>
        <div class="col-sm-10">
            <input type="text" name="goodsName" placeholder="请输入商品名称" class="form-control" id="goodsName">
        </div>
    </div>
    <div class="form-group">
        <label for="price" class="col-sm-2 control-label">价格：</label>
        <div class="col-sm-10">
            <input type="text" name="price" placeholder="请输入商品价格" class="form-control" id="price">
        </div>
    </div>
    <div class="form-group">
        <label for="typeName" class="col-sm-2 control-label">商品类型：</label>
        <div class="col-sm-10">
            <select name="typeName" id="typeName">
                <c:forEach var="goodsType" items="${goodsTypes}">
                    <option value="${goodsType}">${goodsType}</option>
                </c:forEach>
            </select>
        </div>
    </div>
    <div class="form-group">
        <label for="description" class="col-sm-2 control-label">商品描述：</label>
        <div class="col-sm-10">
            <input type="text" name="description" placeholder="请输入商品描述" class="form-control" id="description">
        </div>
    </div>
    <div class="form-group">
        <label for="date" class="col-sm-2 control-label">上架日期：</label>
        <div class="col-sm-10">
            <input type="text" name="date" placeholder="请输入上架日期" class="form-control" id="date">
        </div>
    </div>
    <div class="form-group">
        <label for="stars" class="col-sm-2 control-label">商品星级：</label>
        <div class="col-sm-10">
            <input type="text" name="stars" placeholder="请输入上架日期" class="form-control" id="stars">
        </div>
    </div>
    <div class="form-group">
        <label for="picture" class="col-sm-2 control-label">商品图片</label>
        <div class="col-sm-10">
            <input type="file" name="picture" id="picture">
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="button" class="btn btn-default" onclick="addGoods()">添加</button>
        </div>
    </div>
</form>
</body>
<script>
    function addGoods() {
        <%--$.ajax({--%>
        <%--url:"${pageContext.request.contextPath}/goods/add",--%>
        <%--type:"post",--%>
        <%--data:JSON.stringify({--%>
        <%--"goodsName":$("#goodsName").val(),--%>
        <%--"price":$("#price").val(),--%>
        <%--"typeName":$("#typeName").val(),--%>
        <%--"description":$("#description").val(),--%>
        <%--"date":$("#date").val(),--%>
        <%--"stars":$("#stars").val()--%>
        <%--}),--%>
        <%--success:function (message) {--%>
        <%--alert(message)--%>
        <%--},--%>
        <%--contentType: "application/json"--%>
        <%--})--%>
        var formData = new FormData();
        formData.append("picture", document.getElementById("picture"));
        $.ajax({
            url:"${pageContext.request.contextPath}/goods/addPicture",
            type:"post",
            data:formData,
            cache : false,
            contentType : false,
            processData : false,  //JQuery不处理发送数据
            success:function () {
                alert("图片上传成功")
            }

        })
    }
</script>
</html>
